<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { Delete } from '@element-plus/icons-vue';

const props = defineProps<{
  modelValue?: any[] | any;
  headers?: any[] | any;
}>();
const emit = defineEmits(['update:modelValue', 'update:headers']);
const value = useVModel(props, 'modelValue', emit);
const headers = useVModel(props, 'headers', emit);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { money, region } = toRefs<any>(proxy?.useDict('money', 'region'));

const length = computed(() => headers.value?.length ?? 0);
// 添加规则（整个一行）
const add = () => {
  if (value.value) {
    value.value.push({ 'region': '', list: [], 'currency': '' });
  } else {
    value.value = [{ 'region': '', list: [], 'currency': '' }];
  }
  nextTick(() => {
    for (let i = 0; i < value.value.length; i++) {
      let len = value.value[i].list.length;
      for (let j = 0; j < length.value - len; j++) {
        value.value[i].list.push(undefined);
      }
    }
  });
};
// 移除一条规则（整个一行）
const remove = (i) => {
  value.value.splice(i, 1);
};

const num = ref(null);
const visible = ref(false);
const addCol = () => {
  if (!num.value || num.value <= 0) {
    visible.value = false;
    return;
  }
  if (value.value && value.value.length > 0 && value.value[0].list.length < 6) {
    for (let i = 0; i < value.value.length; i++) {
      value.value[i].list.push(undefined);
    }
  }
  if (headers.value && headers.value.length > 0) headers.value.push(num.value);
  else headers.value = [num.value];

  visible.value = false;
  num.value = null;
};
const delCol = (idx: number) => {
  headers.value.splice(idx, 1);
  for (let i = 0; i < value.value.length; i++) {
    value.value[i].list.splice(idx, 1);
  }
};

/*onMounted(() => {
  debugger;
  if (!headers.value) {
    headers.value.list.push(10);
    headers.value.list.push(100);
    headers.value.list.push(1000);
  }
});*/
</script>

<template>
  <div class="w-full bg-gray/10 rounded-1 pa-2">
    <div class="flex mb-2">
      <div class="flex-1">地区</div>
      <div class="flex-1">货币</div>
      <div v-for="i in length" :key="i" class="flex-1 flex align--center">
        <span>{{ headers[i - 1] }}KG</span>
        <a class="ml-1" @click="delCol(i - 1)">
          <el-icon color="red"><Close /></el-icon>
        </a>
      </div>

      <el-popover :visible="visible" :width="180">
        <div class="w-40 text-right">
          <el-input v-model="num" type="number" class="mb-2"></el-input>
          <el-button size="small" text @click="addCol">取消</el-button>
          <el-button size="small" type="primary" @click="addCol">确定</el-button>
        </div>

        <template #reference>
          <el-button class="ml-2" color="#409EFF" plain @click="visible = true">
            <el-icon class="mr-1">
              <Plus />
            </el-icon>
            添加
          </el-button>
        </template>
      </el-popover>
    </div>

    <div v-for="(_, i) in value" :key="i" class="flex mb-2">
      <el-select v-model="value[i]['region']" placeholder="请输入地区">
        <el-option v-for="dict in region" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <el-select v-model="value[i]['currency']" placeholder="请输入货币">
        <el-option v-for="dict in money" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <el-input v-for="(_, n) in value[i]['list']" :key="`${i}_${n}`" v-model="value[i]['list'][n]" placeholder="请输入费用" type="number"></el-input>
      <el-button class="ml-2" color="red" plain @click="remove(i)">
        <el-icon class="mr-1">
          <Delete />
        </el-icon>
        删除
      </el-button>
    </div>
    <el-button class="w-full" color="green" plain @click="add">添加规则</el-button>
  </div>
</template>

<style scoped lang="scss"></style>
